@import "reset.css";
body{
	font-family: "Roboto", sans-serif;
	line-height: 120%;
	color: #000;
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

/* /////////////////////////////////////////////
BASIC TYPOGRAPHY
//////////////////////////////////////////// */

.txt-micro{
	font-size: 12px;
}

.txt-small{
	font-size: 14px;
}

.txt-medium{
	font-size: 18px;
}

.txt-large{
	font-size: 22px;
}

/* /////////////////////////////////////////////
BASIC COLORS
//////////////////////////////////////////// */

.txt-light-blue{
	color: #33B5E5;
}

.txt-dark-blue{
	color: #33B5E5;
}

.txt-light-purple{
	color: #AA66CC;
}

.txt-dark-purple{
	color: #AA66CC;
}

.txt-light-green{
	color: #99CC00;
}

.txt-dark-green{
	color: #669900;
}

.txt-light-yellow{
	color: #FFBB33;
}

.txt-dark-yellow{
	color: #FF8800;
}

.txt-light-red{
	color: #FF4444;
}
.txt-dark-red{
	color: #CC0000;
}

.light-blue{
	background: #33B5E5;
}

.dark-blue{
	background: #33B5E5;
}

.light-purple{
	background: #AA66CC;
}

.dark-purple{
	background: #AA66CC;
}

.light-green{
	background: #99CC00;
}

.dark-green{
	background: #669900;
}

.light-yellow{
	background: #FFBB33;
}

.dark-yellow{
	background: #FF8800;
}

.light-red{
	background: #FF4444;
}
.dark-red{
	background: #CC0000;
}
/* color: actionbars */
.holodark.action-bar{
	background: #212121;
	color: rgba(255,255,255,.6);
}
.holodark.action-bar.selected{
	color: #fff;
}
.hololight.action-bar{
	background: #DDDDDD;
}
.hololight.bg{
	background: #F2F2F2;
}
.holodark-bg{
	background: #111111;
}
.hololight.action-bar::after{
	background: rgba(0,0,0,.05);
}
.hololight.action-bar::before{
	background: rgba(0,0,0,.1);
}
.holodark.action-bar::after{
	background: rgba(0,0,0,.2);
}
.holodark.action-bar::before{
	background: rgba(255,255,255,.1);
}
.hololight.action-bar.bottom::after{
	background: #000;
}
.selected.holodark.action-bar{
	background: #002E3E;
}
.selected.holodark.action-bar::after{
	background:#33B5E5;
}

/* color:tabs  */

.holodark.tabs-full{
	background: #333;
	color: #fff;
}
.tabs-full li::before{
	background: #fff;
}
.tabs-full li.selected::after{
	background: #33B5E5;
}

/* /////////////////////////////////////////////
ACTION BARS
//////////////////////////////////////////// */
.action-bar{
	width: 100%;
	position: relative;
	height: 48px;
	box-shadow: 0px 1px 5px rgba(0,0,0,.1);	
}
.action-bar::before{
	content: "";
	height: 1px;
	width: 100%;
	position: absolute;
	
}
.action-bar::after{
	content: "";
	height: 2px;
	width: 100%;
	position: absolute;
	bottom: 0;
}
.bottom{
	position: fixed;
	bottom: 0;
}
.bottom.action-bar.bottom::before{
	display: none;
}
.bottom.action-bar.bottom::after{
	top: 0 !important;
}
.action-bar .back{
	width: 7px;
	height: 14px;
	position: absolute;
	background: url(assets/holo-dark/actionbar-icon-back.png) no-repeat;
	background-size:100%;
	margin: 17px 0 0 3px;
	display: none;
}
.action-bar .back.show{
	display: block;
}
.action-bar .app-icon img{
	width: 42px;
	margin: 3px 8px;
	float: left;
}
.action-bar h1{
	float: left;
	height: 25px;
	line-height: 25px;
	margin-top: 12px;
}
.action-icons{
	padding-top: 8px;
}
.action-icons li{
	float: right;
	width: 32px;
	height: 32px;
	background-position: center center;
	background-size:100%;
	margin:0 12px;
}
.action-icons li.overflow{
	background: url(assets/holo-dark/actionbar-icon-overflow.png) no-repeat;
}
.selected.holodark-action-bar::after{
	height: 3px;
}
.selected.action-bar .back,
.selected.action-bar .app-icon{
	display: none;
}
.done{
	display: block;
	position: relative;
	background: url(assets/holo-dark/actionbar-icon-checkmark.png);
	background-size:100%;
	height: 32px;
	width: 32px;
	margin: 8px 12px;
	float: left;
	display: none;
	
}
.done::after{
	content: "";
	height: 24px;
	width: 1px;
	background: #fff;
	position: absolute;
	right: -12px;
	top: 4px;
	opacity: .1;
}
.selected.action-bar .done{
	display: block;
}
.selected.action-bar h1{
	margin-left: 12px;
}

/* /////////////////////////////////////////////
ACTION BARS
//////////////////////////////////////////// */

.tabs-full{
	text-transform: uppercase;
	font-size: 12px;
	width: 100%;
	height: 48px;
}
.tabs-full li{
	height: 48px;
	line-height: 48px;
	width: 33.333333333333%;
	float: left;
	display: block;
	position: relative;
	text-align: center;
	font-weight: bold;
}
.tabs-full li::before{
	content: "";
	width: 1px;
	height: 24px;
	position: absolute;
	top: 12px;
	opacity: .1;
}
.tabs-full li:first-child::before{
	display: none;
}
.tabs-full li.selected::after{
	content: "";
	height: 6px;
	width: 100%;
	background: #33B5E5;
	position: absolute;
	bottom: 0;
	left: 0;
}
















